/**
 * context状态树实现
 */
import React, { Component } from 'react'
import axios from 'axios'
import '../css/05_non_father_son.css'

var GlobalContext = React.createContext();

class FilmItem extends React.Component {
    render() {
        let { name, poster, grade, synopsis } = this.props;
        return (
            <GlobalContext.Consumer>
                {
                    (value) => {
                        return (
                            <div className="filmItem" onClick={() => {
                                value.changeInfo(synopsis)
                            }}>
                                <img src={poster} alt={name} />
                                <h4>{name}</h4>
                                <div>观众评分： {grade}</div>
                            </div>
                        )
                    }
                }
            </GlobalContext.Consumer>
        )
    }
}
class FilmDetail extends React.Component {
    render() {
        return (
            <GlobalContext.Consumer>
                {
                    (value) => {
                        return (
                            <div className="filmDetail">
                                {value.info}
                            </div>
                        )
                    }
                }
            </GlobalContext.Consumer>
        )
    }
}
export default class App extends Component {
    constructor() {
        super()
        this.state = {
            filmList: [],
            info: ""
        }
        axios.get("/test.json").then(res => {
            console.log(res.data.data.films);
            this.setState({ filmList: res.data.data.films })
        })
    }
    render() {
        return (
            <GlobalContext.Provider value={{
                info: this.state.info,
                changeInfo: (value) => {
                    this.setState({
                        info: value
                    })
                }
            }}>
                <div>
                    {
                        this.state.filmList.map(item =>
                            <FilmItem key={item.filmId} {...item}></FilmItem>
                        )
                    }
                    <FilmDetail></FilmDetail>
                </div>
            </GlobalContext.Provider>
        )
    }
}

